<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vs-tree2.0_面包屑</title>
  <link rel="stylesheet" href="../dist/vs-tree.css">
  <link rel="stylesheet" href="./static/css/index.css">
</head>

<body>
  <div id="breadcrumb"></div>
  <div id="tree"></div>
  <script src="../dist/vs-tree.js"></script>
  <script>
    const breadcrumbEl = document.getElementById('breadcrumb')
    console.time('create:data')
    var id = 1000
    function add(parentId, name, deep = 1) {
      const list = []
      for (var i = 0; i < 10; i++) {
        const key = '100' + id++
        const word = name + i
        const item = { id: key, name: word, parentId: parentId }
        if (deep > 0) {
          item.children = [ ...add(key, word, --deep) ]
        }
        list.push(item)
      }
      return list
    }
    const data = {
      id: '1', name: 'zhangsan', parentId: '-1', children: [
        { id: '100', name: 'wangwu', parentId: '1', children: add('100', 'wangwu') },
        { id: '101', name: 'zhaoliu', parentId: '1', children: add('101', 'zhaoliu') },
        { id: '102', name: 'huahua', parentId: '1', children: [
          ...add('102', 'huahua', 5)
        ]},
        { id: '103', name: 'oo-1', parentId: '1' },
        { id: '104', name: 'oo-2', parentId: '1' },
        { id: '105', name: 'oo-3', parentId: '1' },
        { id: '106', name: 'oo-4', parentId: '1' },
        { id: '107', name: 'oo-5', parentId: '1' },
        { id: '108', name: 'oo-6', parentId: '1' },
        { id: '109', name: 'oo-7', parentId: '1' },
        { id: '110', name: 'oo-8', parentId: '1' },
        { id: '111', name: 'oo-9', parentId: '1' },
      ]
    }
    console.timeEnd('create:data')
    console.time('render:tree');
    const tree = new vsTree.default('#tree', {
      data: data,
      showCheckbox: true,
      breadcrumb: {
        el: '#breadcrumb',
        icon: function (node, data) {
          if (data.id === '1') {
            return '@'
          }
          return false
        },
        link: function (node, data) {
          return node.originData.name
        },
        change: function (dom, breads) {
          console.log(dom);
        }
      },
      format: function (data, node) {
        if (!node.isLeaf && data.children) {
          const name =  new String(data.name + '（'+ data.children.length +'）')
          return {
            name
          }
        }
        return {}
      }
    });
    console.timeEnd('render:tree');
  </script>
</body>

</html>